<template>
	<!-- 权益加量包 列表 -->
	<view>
		<myHead title="权益加量包" :right="true" text_right="我的加量包" @clickRight="clickRight" textrightcolor="#333333">
		</myHead>
		<view class="box">
			<view class="content" v-for="(item,index) in dataList" :key="index" @click="goDetails(item)">
				<view class="box1">
					<view>
						<image class="img" :src="URL+item.Icon"></image>
					</view>
					<view class="box2">
						<view class="text">{{item.Title}}</view>
						<view class="text1">{{item.Description}}</view>
					</view>
				</view>

				<view class="box3">
					<u-icon name="arrow-right" color="#999999" size="14"></u-icon>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import myHead from "@/pages/component/baseHead.vue";
	export default {
		components: {
			myHead,
		},
		data() {
			return {
				dataList: [],
				URL: this.$config.domain.staticUrl
			}
		},
		onLoad() {
			this.quanyiList()
		},
		methods: {
			clickRight() {
				console.log("点击我的加量包");
				uni.navigateTo({
					url: "/pages/views/packageB/type-jobhunting/DosingPackage/dosingRecord"
				})
			},
			quanyiList() {
				this.$http.huirc.servitemsList({
					Type: 1
				}).then(res => {
					console.log(res);
					if (res.Success) {
						this.dataList = res.Result
					}
				})
			},
			goDetails(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/views/packageB/type-recruit/BenefitPackage/dosingPackage?type=" + item.FeatureType
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		padding: 20rpx 30rpx;

		.content {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 32rpx 40rpx 37rpx 30rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.box1 {
				display: flex;

				.img {
					width: 74rpx;
					height: 74rpx;
					// background: linear-gradient(135deg, rgba(250,238,231,0.28) 0%, rgba(219,122,69,0.26) 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					// padding: 20rpx;
					margin-right: 20rpx;
				}

				.box2 {
					padding-right: 23rpx;

					.text {
						font-size: 26rpx;
						font-weight: 700;
						color: #563726;

					}

					.text1 {
						font-size: 24rpx;
						font-weight: 400;
						color: #000000;
						padding-top: 4rpx;
					}
				}

			}


			.box3 {
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>